<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二个React练习 中间列表</title>
    <!-- React核心 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- react-dom  -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="root">

    </div>
    <div id="boxx">

    </div>
    <script>
        //3.创建React元素
        let item = React.createElement('div',{className:'item',title:"列表"},
            React.createElement('h2',{className:"title"},'中将列表',
                React.createElement('ul',{className:"list"},
                    React.createElement('li',null,'1.张三'),
                    React.createElement('li',{onClick:function(){alert("李四")}},"2.李四"),
                    React.createElement('li',null,'3.王五')
                ))
        )
        //4.创建根节点(挂载点)
        let root = ReactDOM.createRoot(document.getElementById('root'))
        //5.渲染元素到页面中
        root.render(item)


        //练习
        let items=React.createElement('div',{className:'item',title:"列表"},
            React.createElement("div",null,'刮刮乐课堂开课了。如何中百万彩票',
                React.createElement("p",null,'是一个特别特别幸运的人',),
                React.createElement("p",null,"那寿命来换钱")
            )
        )
        //创建根节点（挂载点)
        let box = ReactDOM.createRoot(document.getElementById('boxx'))
        //5.渲染元素到页面中
        box.render(items)

        /**
         * 创建react元素 总结：
         * 1.元素名称小写
         * 2.元素属性 class->className
        */
    </script>
</head>
<body>
    <!-- <div class="item">
        <h2 class="title">注意啦，刮刮乐开讲啦</h2>
        <ul class="list">
            <li>1.张瑞振</li>
            <li>1.张瑞振</li>
            <li>1.张瑞振</li>
            <li>1.张瑞振</li>
            <li>1.张瑞振</li>
            <li>1.张瑞振</li>
        </ul>
    </div> -->

</body>
</html>